<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        overflow-x: hidden;
        overflow-y: scroll;
      }
      .container {
        width: 100%;
      }
      canvas {
        position: fixed;
        top: 0;
      }
      .loading {
        width: 300px;
        text-align: center;
        position: absolute;
        top: 45%;
        left: 50%;
        margin-left: -150px;
        height: 5px;
        border: solid 1px #ccc;
        border-radius: 5px;
      }
      .loading-wrapper {
        width: 100%;
        /* position: relative; */
      }
      .loading-bar{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 5px;
        z-index: 10;
        background-color: blue;
        border-radius: 5px;
      }
      .loading-status{
        font-size: 20px;
        font-weight: 200;
        margin-top: -30px;
        color: #666;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1 class="loading hide">
        <p class="loading-status">0%</p>
        <p class="loading-bar"></p>
    </h1>
      
    <div class="container"></div>
    <canvas class="canvas"></canvas>
    <script>
      const baseurl = `https://dji-official-fe.djicdn.com/assets/uploads/p/980e82a1-dc9e-4518-84b3-1f28a2a2eb2f/drones-pc/`;
      const images = [];
      let imageIndex = 0;
      const maxlength = 240; //240
      let pageHeight = 10000;
      const winWidth = window.innerWidth;
      const winHeight = window.innerHeight;

      const container = document.querySelector(".container");
      container.style.height = winHeight + "px";
      
      const canvas = document.querySelector("canvas");
      canvas.width = winWidth;
      canvas.height = winHeight;
      const ctx = canvas.getContext("2d");

      // 加载进度条
      let loading = false;
      const loadingCom = document.querySelector(".loading")
      const loadingLength = 300;
      const loadingStatus = document.querySelector(".loading-status")
      const loadingBar = document.querySelector(".loading-bar")

      // 预加载图片
      function loadImage(success) {
        loading = true;
        showLoading(loading);
        function nextImage() {
          let image = new Image();
          image.src = baseurl + imageIndex + ".jpg";
          image.onload = function () {
            images.push(image);
            imageIndex++;
            if (imageIndex < maxlength) {
              nextImage();
              updateLoading(imageIndex,maxlength)
            } else {
              loading = false;
              showLoading(loading);
              // container.style.height = pageHeight + "px";
              // 记载结束，执行后续操作
              success();
            }
          };
        }
        nextImage();
      }

      function showLoading(loading) {
        if (loading) {
          loadingCom.classList.remove("hide");
        } else {
          loadingCom.classList.add("hide");
        }
      }
      function updateLoading(cur,total){
       
          let width = ( cur/total) * 300;
          document.querySelector(".loading-bar").style.width = width + 'px'
          document.querySelector(".loading-status").innerHTML =  (cur/total*100).toFixed(2) + '%'
      }


      let curDrawIndex = 0;
      function drawImageAuto() {
        ctx.clearRect(0, 0, winWidth, winHeight);
        ctx.drawImage(images[curDrawIndex], 0, 0, winWidth, winHeight);
        curDrawIndex++;
        if (curDrawIndex < maxlength) {
          requestAnimationFrame(drawImage);
        }
      }

      function drawImageByScroll(top) {
        let curIndex = Math.floor((top / pageHeight) * maxlength);
        ctx.clearRect(0, 0, winWidth, winHeight);
        ctx.drawImage(images[curIndex], 0, 0, winWidth, winHeight);
        curDrawIndex++;
      }

      function bindEvent() {
        window.addEventListener("scroll", function (e) {
          let top;
          if (document.body && document.body.scrollTop) {
            top = document.body.scrollTop;
          }

          if (document.documentElement && document.documentElement.scrollTop) {
            top = document.documentElement.scrollTop;
          }
          if (top < pageHeight) {
            drawImageByScroll(top);
          }else{
            
          }
        });
      }

      loadImage(function () {
        drawImageByScroll(0)
        bindEvent()
      });
    </script>
  </body>
</html>
